<template>
    <a-modal :title="title" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
        @cancel="handleCancel" cancelText="关闭">
        <a-spin :spinning="confirmLoading">
            <div id="allmap" class="mapbox">
                <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" style="height:400px"
                    @click="getClickInfo" @ready="handler" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom"
                    @zoomend="syncCenterAndZoom">
                    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
                        :autoLocation="true"></bm-geolocation>
                    <bm-marker :position="{ lng: center.lng, lat: center.lat }" :dragging="false"></bm-marker>
                </baidu-map>
            </div>
        </a-spin>
    </a-modal>
</template>

<script>
export default {
    name: "BMapComponent",
    data() {
        return {
            title: "选择地址",
            visible: false,
            model: {},
            confirmLoading: false,
            headers: {},
            center: {
                lng: 114.42818022698,
                lat: 30.479137926147
            },
            zoom: 15,
            storeLocation: {},
        }
    },
    created() {
    },
    mounted() {
    },
    watch: {
        /*      center:{
                handler(newPoint,oldPoint){
                  this.marker = {lng:newPoint.lng, lat:newPoint.lat};
                },
                deep: true,
                immediate: true
              }*/
    },
    methods: {
        show(record) {
            this.visible = true;
            if (record) {
              Object.assign(this.model, record);
              this.center.lng = record.lng;
              this.center.lat = record.lat;
              this.zoom = 15;
              this.$nextTick(() => {
                console.log(JSON.stringify(record))
              });
            }
        },
        close() {
            this.$emit('close');
            this.visible = false;
        },
        handleOk() {
            const that = this;
            let point = new BMap.Point(this.center.lng, this.center.lat);
            let coder = new BMap.Geocoder();
            coder.getLocation(point, result => {
                this.storeLocation = {
                    lng: point.lng,
                    lat: point.lat,
                    address: result.address
                }
                console.log("address=" + result.address)
                console.log("storeLocation=" + JSON.stringify(this.storeLocation));
                this.$emit('getStoreLocation', this.storeLocation);
                this.close();
            });
        },
        handleCancel() {
            this.close()
        },
        //地图
        handler({ BMap, map }) {
            console.log(BMap, map);
            map.centerAndZoom(new BMap.Point(this.model.lng, this.model.lat), 15);
        },
        getClickInfo(e) {
            console.log(e.point.lng)
            console.log(e.point.lat)
            this.center.lng = e.point.lng
            this.center.lat = e.point.lat
        },
        syncCenterAndZoom(e) {
            const { lng, lat } = e.target.getCenter()
            this.center.lng = lng
            this.center.lat = lat
            this.zoom = e.target.getZoom()
        },
    }
}
</script>
<style lang="less" scoped></style>
